import { defineConfig, presetAttributify, presetIcons, presetWind3 } from 'unocss'
import presetWind4 from '@unocss/preset-wind4'
import type { IconifyJSON } from '@iconify/types'
import { themes } from './src/themes'

export default defineConfig({
  presets: [
    presetWind4({
      dark: 'class',
    }),
    presetAttributify(),
    presetIcons({
      collections: {
        solar: (): Promise<IconifyJSON> =>
          import('@iconify-json/solar/icons.json').then((i) => i.default as IconifyJSON),
      },
      extraProperties: {
        display: 'inline-block',
        'font-size': '1.6rem',
        'margin-right': '0.2rem',
        'margin-left': '0.2rem',
        'user-select': 'none',
        transition: 'all 0.3s ease',
        'stroke-linecap': 'round',
        'stroke-linejoin': 'round',
      },
    }),
  ],
  theme: {
    colors: themes.light.colors, // 默认使用light主题
  },
  // 自定义规则，支持主题变量
  rules: [
    // 自定义高度规则
    ['h-fill-available', { height: '-webkit-fill-available' }],
    // 动态主题颜色规则
    [
      /^theme-(.+)$/,
      ([, color], { theme }: { theme }) => {
        if (theme.colors[color]) {
          return { color: `var(--colors-${color})` }
        }
      },
    ],
    [
      /^bg-theme-(.+)$/,
      ([, color], { theme }) => {
        if (theme.colors[color]) {
          return { 'background-color': `var(--colors-${color})` }
        }
      },
    ],
    [
      /^border-theme-(.+)$/,
      ([, color], { theme }) => {
        if (theme.colors[color]) {
          return { 'border-color': `var(--colors-${color})` }
        }
      },
    ],
  ],
  shortcuts: [
    {
      // 基础按钮样式
      btn: 'px-4 py-2 rounded-lg font-medium transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed',

      // 主要按钮
      'btn-primary':
        'btn bg-blue-600 hover:bg-blue-700 text-white focus:ring-blue-500 shadow-sm hover:shadow-md active:scale-95',

      // 次要按钮
      'btn-secondary':
        'btn bg-gray-100 hover:bg-gray-200 dark:bg-gray-700 dark:hover:bg-gray-600 text-gray-900 dark:text-gray-100 border border-gray-300 dark:border-gray-600 focus:ring-gray-500',

      // 成功按钮
      'btn-success':
        'btn bg-green-600 hover:bg-green-700 text-white focus:ring-green-500 shadow-sm hover:shadow-md active:scale-95',

      // 警告按钮
      'btn-warning':
        'btn bg-yellow-600 hover:bg-yellow-700 text-white focus:ring-yellow-500 shadow-sm hover:shadow-md active:scale-95',

      // 危险按钮
      'btn-danger':
        'btn bg-red-600 hover:bg-red-700 text-white focus:ring-red-500 shadow-sm hover:shadow-md active:scale-95',

      // 信息按钮
      'btn-info':
        'btn bg-blue-500 hover:bg-blue-600 text-white focus:ring-blue-400 shadow-sm hover:shadow-md active:scale-95',

      // 小尺寸按钮
      'btn-sm': 'px-3 py-1.5 text-sm rounded-md',

      // 大尺寸按钮
      'btn-lg': 'px-6 py-3 text-lg rounded-xl',

      // Dashboard卡片按钮基础样式
      'dashboard-btn': 'flex flex-col items-center p-4 rounded-lg transition-colors border-none',

      // Dashboard按钮颜色变体
      'dashboard-btn-blue': 'bg-blue-50 dark:bg-blue-900/20 hover:bg-blue-100 dark:hover:bg-blue-900/40',
      'dashboard-btn-green': 'bg-green-50 dark:bg-green-900/20 hover:bg-green-100 dark:hover:bg-green-900/40',
      'dashboard-btn-purple': 'bg-purple-50 dark:bg-purple-900/20 hover:bg-purple-100 dark:hover:bg-purple-900/40',
      'dashboard-btn-orange': 'bg-orange-50 dark:bg-orange-900/20 hover:bg-orange-100 dark:hover:bg-orange-900/40',

      // Dashboard图标颜色
      'dashboard-icon-blue': 'text-blue-600 dark:text-blue-400',
      'dashboard-icon-green': 'text-green-600 dark:text-green-400',
      'dashboard-icon-purple': 'text-purple-600 dark:text-purple-400',
      'dashboard-icon-orange': 'text-orange-600 dark:text-orange-400',

      // Dashboard文本样式
      'dashboard-text': 'text-sm text-gray-700 dark:text-gray-300',

      // 卡片样式
      card: 'bg-white dark:bg-gray-800 rounded-lg shadow-md p-6 border border-gray-200 dark:border-gray-700',

      // 输入框样式
      input:
        'w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-colors',

      // 表格样式
      'table-header':
        'text-left py-3 px-4 font-semibold text-gray-900 dark:text-gray-200 border-b border-gray-200 dark:border-gray-700',
      'table-cell': 'py-4 px-4 text-gray-900 dark:text-gray-200 border-b border-gray-100 dark:border-gray-800',
      'table-row': 'hover:bg-gray-50 dark:hover:bg-gray-800/50 transition-colors',

      // 徽章样式
      badge: 'px-2 py-1 text-xs rounded-full font-medium',
      'badge-primary': 'badge bg-blue-100 dark:bg-blue-900 text-blue-800 dark:text-blue-200',
      'badge-success': 'badge bg-green-100 dark:bg-green-900 text-green-800 dark:text-green-200',
      'badge-warning': 'badge bg-yellow-100 dark:bg-yellow-900 text-yellow-800 dark:text-yellow-200',
      'badge-danger': 'badge bg-red-100 dark:bg-red-900 text-red-800 dark:text-red-200',
      'badge-info': 'badge bg-purple-100 dark:bg-purple-900 text-purple-800 dark:text-purple-200',
    },
  ],
})
